Android アプリに Flutter 画面を追加する

コンテンツ

このガイドでは、単一の Flutter 画面を既存の Android アプリ。 Flutter画面は通常追加できますが、不透明なスクリーン、またはシースルー、半透明のスクリーンとして使用できます。このガイドでは両方のオプションについて説明します。

通常のFlutter画面を追加する

Add Flutter Screen Header

ステップ 1: FlutterActivity を AndroidManifest.xml に追加する

Flutter が提供するFlutterActivity flutterを表示するには Android アプリ内でのエクスペリエンス。他のものと同じようにActivity、FlutterActivityに登録する必要がありますAndroidManifest.xml。次の XML をAndroidManifest.xmlファイルの下にあるapplication鬼ごっこ：

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

への参照@style/LaunchTheme交換できますに適用したい Android テーマごとにFlutterActivity。テーマの選択により、適用される色が決まります Android のシステムクロム (Android のナビゲーションバーなど) の背景色FlutterActivity直前 Flutter UI が初めてそれ自体をレンダリングします。

ステップ 2: FlutterActivity を起動する

とFlutterActivityマニフェストファイルに登録されている、起動するコードを追加するFlutterActivityどの時点からでも必要なアプリに追加します。次の例は、FlutterActivityから発射されるOnClickListener。

myButton.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity.createDefaultIntent(currentActivity)
    );
  }
});

myButton.setOnClickListener {
  startActivity(
    FlutterActivity.createDefaultIntent(this)
  )
}

前の例では、Dart エントリポイントがと呼ばれますmain()、最初の Flutter ルートは「/」です。 Dart エントリポイントは、を使用して変更することはできませんIntent、ただし、最初のルートは次を使用して変更できます。Intent。次の例は、FlutterActivity最初にカスタムをレンダリングするルートイン flutter。

myButton.addOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity
        .withNewEngine()
        .initialRoute("/my_route")
        .build(currentActivity)
      );
  }
});

myButton.setOnClickListener {
  startActivity(
    FlutterActivity
      .withNewEngine()
      .initialRoute("/my_route")
      .build(this)
  )
}

交換"/my_route"希望の初期ルートで。

の使用withNewEngine()ファクトリーメソッドを構成しますFlutterActivity内部的に作成するもの独自のFlutterEngine実例。これには、重要な初期化時間。代替アプローチ指示することですFlutterActivityあらかじめ温めたものを使用するには、キャッシュされたFlutterEngine、 flutterを最小限に抑えます初期化時間。そのアプローチについては次に説明します。

ステップ 3: (オプション) キャッシュされた FlutterEngine を使用する

毎日FlutterActivity独自のものを作成するFlutterEngineデフォルトでは。各FlutterEngine自明ではないウォームアップタイム。これは、標準を立ち上げることを意味しますFlutterActivityFlutter の前に短い遅延が発生します経験が目に見えるようになる。この遅延を最小限に抑えるには、温めることができますFlutterEngineに到着する前にあなたのFlutterActivity、その後、使用できますあなたの事前に温めたFlutterEngineその代わり。

あらかじめ温めておくにはFlutterEngine、合理的なものを見つけてくださいインスタンスを作成するアプリ内の場所FlutterEngine。次の例では、任意にFlutterEngineの中にApplicationクラス：

public class MyApplication extends Application {
  public FlutterEngine flutterEngine;
  
  @Override
  public void onCreate() {
    super.onCreate();
    // Instantiate a FlutterEngine.
    flutterEngine = new FlutterEngine(this);

    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.getDartExecutor().executeDartEntrypoint(
      DartEntrypoint.createDefault()
    );

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine);
  }
}

class MyApplication : Application() {
  lateinit var flutterEngine : FlutterEngine

  override fun onCreate() {
    super.onCreate()

    // Instantiate a FlutterEngine.
    flutterEngine = FlutterEngine(this)

    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.dartExecutor.executeDartEntrypoint(
      DartExecutor.DartEntrypoint.createDefault()
    )

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine)
  }
}

に渡されたIDは、FlutterEngineCache何でも構いません。すべてのユーザーに同じ ID を渡すようにしてください。FlutterActivityまたFlutterFragmentキャッシュされたものを使用する必要がありますFlutterEngine。使用するFlutterActivityキャッシュされたものでFlutterEngineについては次に説明します。

事前にウォームアップされキャッシュされたFlutterEngine、今必要なのはあなたに指示するFlutterActivityキャッシュされたものを使用するには87253c0d-1144-44c9-a1c1-ee965c85fbc新しいものを作成する代わりに。これを実現するには、次を使用しますFlutterActivityのwithCachedEngine()ビルダー：

myButton.addOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity
        .withCachedEngine("my_engine_id")
        .build(currentActivity)
      );
  }
});

myButton.setOnClickListener {
  startActivity(
    FlutterActivity
      .withCachedEngine("my_engine_id")
      .build(this)
  )
}

を使用するときは、withCachedEngine()ファクトリーメソッド、必要なデータをキャッシュするときに使用したのと同じ ID を渡します。FlutterEngine。

さて、起動すると、FlutterActivity、遅延が大幅に減少します Flutterコンテンツの表示。

ノート：実行時のパフォーマンスだけが理由ではありません事前ウォーミングとキャッシュFlutterEngine。あらかじめ温めたものFlutterEngineDartコードを独立して実行しますからFlutterActivity、そのようなことが可能になりますFlutterEngineいつでも任意の Dart コードを実行するために使用されます。非 UI アプリケーションロジックは、FlutterEngine、ネットワーキングやデータキャッシュ、バックグラウンド動作など以内Serviceまたは他の場所でも。を使用するときは、FlutterEngineバックグラウンドで動作を実行するには、必ずすべての事項に従ってください。 Android のバックグラウンド実行に関する制限。

キャッシュされたエンジンを使用した初期ルート

初期ルートの概念は、FlutterActivityまたはFlutterFragment新しいものでFlutterEngine。しかし、FlutterActivityとFlutterFragmentを提供しないでくださいキャッシュされたエンジンを使用する場合の初期ルートの概念。これは、キャッシュされたエンジンがすでに存在していることが想定されるためです。 Dart コードを実行しているため、設定するには遅すぎることを意味します。初期ルート。

キャッシュされたエンジンを起動したい開発者カスタムの初期ルートを使用すると、キャッシュされたルートを設定できますFlutterEngine直前にカスタムの初期ルートを使用するには Dart エントリポイントを実行します。次の例キャッシュされたエンジンでの初期ルートの使用を示します。

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    // Instantiate a FlutterEngine.
    flutterEngine = new FlutterEngine(this);
    // Configure an initial route.
    flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.getDartExecutor().executeDartEntrypoint(
      DartEntrypoint.createDefault()
    );
    // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine);
  }
}

class MyApplication : Application() {
  lateinit var flutterEngine : FlutterEngine
  override fun onCreate() {
    super.onCreate()
    // Instantiate a FlutterEngine.
    flutterEngine = FlutterEngine(this)
    // Configure an initial route.
    flutterEngine.navigationChannel.setInitialRoute("your/route/here");
    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.dartExecutor.executeDartEntrypoint(
      DartExecutor.DartEntrypoint.createDefault()
    )
    // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine)
  }
}

ナビゲーションチャネルの初期ルートを設定すると、関連付けられたFlutterEngineの最初の実行時に目的のルートを表示します。runApp()ダーツ機能。

ナビゲーションチャネルの初期ルートプロパティの変更最初の実行後runApp()効果はありません。同じものを使用したい開発者FlutterEngine異なる間Activity砂Fragmentとスイッチこれらのディスプレイ間のルートにはメソッドチャネルを設定する必要があります。 Dart コードに変更を明示的に指示するNavigatorルート。

半透明の Flutter 画面を追加する

Add Flutter Screen With Translucency Header

ほとんどのフルスクリーンの Flutter エクスペリエンスは不透明です。ただし、一部のアプリは Flutter をデプロイしたいと考えています。たとえば、モーダルのように見える画面ダイアログまたはボトムシート。 Flutter は半透明をサポートしますFlutterActivity箱から出してすぐです。

あなたのFlutterActivity半透明の、通常のプロセスに次の変更を加えますの作成と起動dcddf25b-a5c8-422d-8add-2fdde478ed6b。

ステップ 1: 半透明のテーマを使用する

Android には特別なテーマプロパティが必要ですActivityレンダリングする半透明の背景付き。 Android テーマを作成または更新するには、次のプロパティ:

<style name="MyTheme" parent="@style/MyParentTheme">
  <item name="android:windowIsTranslucent">true</item>
</style>

次に、半透明のテーマを適用します。FlutterActivity。

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/MyTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

あなたのFlutterActivity半透明をサポートするようになりました。次に、FlutterActivity明示的な透明性のサポート付き。

ステップ 2: 透明な FlutterActivity を開始する

を起動するには、FlutterActivity背景が透明の場合、適切なパスを渡すBackgroundModeにIntentBuilder:

// Using a new FlutterEngine.
startActivity(
  FlutterActivity
    .withNewEngine()
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(context)
);

// Using a cached FlutterEngine.
startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(context)
);

// Using a new FlutterEngine.
startActivity(
  FlutterActivity
    .withNewEngine()
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(this)
);

// Using a cached FlutterEngine.
startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(this)
);

あなたは今、FlutterActivity透明な背景付き。